require(['config'], function() {
    require(['utils', 'test/test-data/data'], function(utils, testData) {

        //初始化页面
        initDataList(); //数据
        initListen(); //事件

        function initDataList() {
            console.log(testData);
            require(['module/build/data-items'], function(tpl) {
                //请求数据 渲染dom
                $('#container_box').append(tpl({ List: testData }));
                //监听事件
                initListen();
            });
        };

        function initListen() {
            //左侧菜单滑出
            $('#menu').off().on('click', (e) => {
                    $(".left").toggleClass("show_menu");
                })
                //添加资源
            $(".add_item").off().on('click', (e) => {
                    let el = $(e.currentTarget);
                    let id = el.attr('itemId');
                    //屏幕大于等于1200
                    let screenWidth = window.innerWidth;
                    if (screenWidth >= 1200) {
                        let status = $('#dialog_' + id).hasClass('hide');
                        $('.dialog').addClass('hide');
                        if (status) {
                            $('#dialog_' + id).removeClass('hide');
                        } else {
                            $('#dialog_' + id).addClass('hide');
                        }
                    } else if (768 <= screenWidth && screenWidth < 1200) {
                        require(['module/build/dialog'], function(tpl) {
                            //请求数据 渲染dom
                            $('body').append(tpl({ id: id }));
                            addItem();
                            //控制遮罩层
                            $('.mask').removeClass('hide');
                        });
                    } else {
                        require(['module/build/dialog'], function(tpl) {
                            //请求数据 渲染dom
                            $('body').append(tpl({ id: id }));
                            addItem();
                            //控制遮罩层
                            $('.mask').removeClass('hide');
                        });
                    }
                })
                //删除资源
            $(".delete").off().on('click', (e) => {
                    $(e.currentTarget.parentNode.parentNode).remove();
                    $('.dialog').addClass('hide');
                })
                //确定添加
            $('.add').off().on('click', (e) => {
                    //获取id
                    let el = $(e.currentTarget);
                    let id = el.attr('itemId');
                    //获取input值
                    let resource = $('#resource_' + id).val();
                    //获取分隔符
                    let flag = resource.indexOf(',') != -1 ? ',' : '，';
                    let resources = resource.split(flag);
                    if (resources != "") {
                        resources.forEach((value, index) => {
                            $('.tagbox_' + id).append(' <div>' +
                                '<span class="tag">' + value + '<i class="icon-trash delete" style="margin-left: 10px;"></i></span>' +
                                '</div>');
                        });
                    }
                    //清缓存
                    $('#resource_' + id).val('');
                    //隐藏
                    $('#dialog_' + id).toggleClass('hide');
                    //注册删除事件
                    $(".delete").off().on('click', (e) => {
                        $(e.currentTarget.parentNode.parentNode).remove();
                    })
                })
                //返回
            $('.cancle').off().on('click', (e) => {
                let el = $(e.currentTarget);
                let id = el.attr('itemId');
                $('#dialog_' + id).toggleClass('hide');
                //清缓存
                $('#resource_' + id).val('');
            })
            $('.me').off().on('click', () => {
                    $(".me_info").toggleClass("hide");
                })
                //关闭dialog
            $('.close_dialog').off().on('click', (e) => {
                let el = $(e.currentTarget);
                let id = el.attr('itemId');
                $('#dialog_' + id).toggleClass('hide');
                //清缓存
                $('#resource_' + id).val('');
            })
        }

        function addItem() {
            $('.com_add').off().on('click', (e) => {
                    //获取id
                    let el = $(e.currentTarget);
                    let id = el.attr('itemId');
                    //获取input值
                    let resource = $('#com_resource').val();
                    //获取分隔符
                    let flag = resource.indexOf(',') != -1 ? ',' : '，';
                    let resources = resource.split(flag);
                    if (resources != "") {
                        resources.forEach((value, index) => {
                            $('.tagbox_' + id).append(' <div>' +
                                '<span class="tag">' + value + '<i class="icon-trash delete" style="margin-left: 10px;"></i></span>' +
                                '</div>');
                        });
                    }
                    //清缓存
                    $('#com_resource').val('');
                    //取消遮罩层
                    $('.mask').addClass('hide');
                    //隐藏
                    $('.comp_dialog').remove();
                    //注册删除事件
                    $(".delete").off().on('click', (e) => {
                        $(e.currentTarget.parentNode.parentNode).remove();
                    })
                })
                //返回
            $('.com_cancle').off().on('click', (e) => {
                $('.comp_dialog').remove();
                //清缓存
                $('#com_resource').val('');
                //取消遮罩层
                $('.mask').addClass('hide');
            })
            $('.com_close_dialog').off().on('click', (e) => {
                $('.comp_dialog').remove();
                //清缓存
                $('#com_resource').val('');
                //取消遮罩层
                $('.mask').addClass('hide');
            })
        }
    })
});